<template>
	<view class="yb-comment y-flex">
		<view class="top y-flex y-row y-align-center">
			<com-avatar size="60" class="avatar" lazy-load :src="item.avatar"></com-avatar>
			<view class="info y-flex y-justify-between y-flex-1">
				<com-text :size="26" :color="skinColor.color_1" :lines="1" :value="item.title" @click="handleTitleTap(item)" />
				<com-text :size="20" :class="{'mt-10': !item.avatar}" :color="skinColor.color_2" :lines="1" :value="item.subtitle" />
			</view>
		</view>
		<view class="bottom" :style="{'padding-left': item.avatar ? '80rpx' : 0}" v-if="item.masterComments && item.masterComments.length > 0">
			<view class="child" :style="{'background-color': skinColor.color_gap_1}" v-if="item.masterComments.length > 0">
				<view class="list" :style="{'border-color': skinColor.color_gap_1}" v-for="(child, i) in item.masterComments" :key="i">
					<view class="top y-flex y-row y-align-center">
						<com-avatar size="60" class="avatar" lazy-load :src="child.avatar"></com-avatar>
						<view class="info y-flex y-justify-between y-flex-1">
							<com-text :size="26" :color="skinColor.color_1" :lines="1" :value="child.title" @click="handleTitleTap(child)" />
							<com-text :class="{'mt-10': !child.avatar}" :size="20" :color="skinColor.color_2" :lines="1" :value="child.subtitle" />
						</view>
					</view>
					<view class="bottom" :style="{'padding-left': child.avatar ? '80rpx' : 0}">
						<com-read-more class="mt-10" :shadow-color="skinColor.color_gap_1" :visible="child.content.length > 200">
							<rich-text class="fs-28" :style="{color: skinColor.color_1}"
							:nodes="parseContent(child.content)" @longpress="copyComment(child)" />
						</com-read-more>
					</view>
				</view>
			</view>
			<com-read-more class="mt-10" :shadow-color="bgColor" :visible="item.content.length > 200">
				<rich-text class="fs-28" :style="{color: skinColor.color_1}"
				:nodes="parseContent('回复：' + item.content)" @longpress="copyComment(item)" />
			</com-read-more>
		</view>
		<view class="bottom" :style="{'padding-left': item.avatar ? '80rpx' : 0}" v-else>
			<com-read-more class="mt-10" :shadow-color="bgColor" :visible="item.content.length > 200">
				<rich-text class="fs-28" :style="{color: skinColor.color_1}"
				:nodes="parseContent(item.content)" @longpress="copyComment(item)" />
			</com-read-more>
			<view class="child" :style="{'background-color': skinColor.color_gap_1}" v-if="item.subComments && item.subComments.length > 0">
				<view class="list" :style="{'border-color': skinColor.color_gap_1}" v-for="(child, i) in item.subComments.slice(0, moreShow ? item.subComments.length : 1)" :key="i">
					<view class="top y-flex y-row y-align-center">
						<com-avatar size="60" class="avatar" lazy-load :src="child.avatar"></com-avatar>
						<view class="info y-flex y-justify-between y-flex-1">
							<com-text :size="26" :color="skinColor.color_1" :lines="1" :value="child.title" @click="handleTitleTap(child)" />
							<com-text :size="20" :class="{'mt-10': !child.avatar}" :color="skinColor.color_2" :lines="1" :value="child.subtitle" />
						</view>
					</view>
					<view class="bottom" :style="{'padding-left': child.avatar ? '80rpx' : 0}">
						<com-read-more class="mt-10" :shadow-color="skinColor.color_gap_1" :visible="child.content.length > 200">
							<rich-text class="fs-28" :style="{color: skinColor.color_1}"
							:nodes="parseContent(child.content)" @longpress="copyComment(child)" />
						</com-read-more>
					</view>
				</view>
			</view>
			<view class="more y-flex y-row y-align-center" v-if="item.subComments && item.subComments.length > 1" @tap="showMore">
				<text class="more-text" :style="{color: skinColor.color_blue}">{{ moreShow ? '收起更多回复' : '查看更多回复'}}</text>
				<view class="arrow" :class="{'arrow-up': moreShow, 'arrow-down': !moreShow}" :style="{'border-color': skinColor.color_blue}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import emojis from '@/assets/other/emoji.js'
	import parseHtml from '@/assets/other/html-parser.js'
	import {pixelunit, validateUrl} from '@/assets/js/util.js';
	export default {
		name: 'CommentCell',
		inject: ['getSkinColor', 'navigate', 'getEmojiMap'],
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			bgColor: {
				type: 'String',
				default: '#fff'
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			pixelunit () {
				return pixelunit
			},
			emojiMap () {
				return this.getEmojiMap()
			}
		},
		data () {
			return {
				moreShow: false
			}
		},
		methods: {
			copyComment (params) {
				uni.setClipboardData({
				    data: params.content,
				    success: () => {
				        uni.showToast({
				        	title: '已复制 ' + params.title + ' 的评论',
							icon: 'none'
				        })
				    },
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				});
			},
			parseContent (text) {
				text = text.replace(/<img/g, `<img style="width:20px;height:20px;"`)//给img设置宽高，因为nvue的rich-text组件渲染img不会自适应宽高，这里默认只有表情img，默认给20像素尺寸
				text = text.replace(/\[([^\]]+)\]/g, (match, p1) => {//替换[表情]文本
				  return this.emojiMap[p1] || `[${p1}]`; // 如果找不到对应的emoji，保持原样
				});
				return parseHtml(text)
			},
			showMore () {
				this.moreShow = !this.moreShow
			},
			handleTitleTap (item) {
				this.navigate(item.url)
			}
		}
	}
</script>

<style scoped>
	.yb-comment .child {
		margin: 20rpx 0;
	}
	.yb-comment .child .list {
		padding: 20rpx;
	}
	.yb-comment .top .avatar {
		margin-right: 20rpx;
	}
	.yb-comment .top .info {
		height: 70rpx;
	}
	.yb-comment .bottom {
		padding-left: 80rpx;
	}
	.yb-comment .bottom .more .more-text {
		font-size: 20rpx;
	}
	.yb-comment .bottom .more .arrow {
		width: 12rpx;
		height: 12rpx;
		border-bottom-width: 2rpx;
		border-right-width: 2rpx;
		margin-left: 5rpx;
	}
	.yb-comment .bottom .more .arrow-up {
		margin-top: 6rpx;
		transform: rotateZ(-135deg);
	}
	.yb-comment .bottom .more .arrow-down {
		margin-top: -6rpx;
		transform: rotateZ(45deg);
	}
</style>